<template>
  <fieldset>

    <el-radio-group v-model='u' size="large" class="view" @change="changeInput">
      <el-radio-button label="用户"/>
      <el-radio-button label="租户"/>
    </el-radio-group>

    <el-form ref="user" :model="user" :rules="rules" label-width="80px" class="demo-ruleForm"
             style="width: 600px"
             v-if="radioValue === '用户'">

      <el-form-item label="用户名" prop="userName">
        <el-input v-model="user.userName"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="phone" @change="getRent">
        <el-input v-model="user.phone"></el-input>
      </el-form-item>

      <el-form-item label="租户名" prop="tenantName">
        <el-select v-model="user.tenantName" placeholder="请选择租户" @change="changeGame">
          <el-option
              v-for="item in options"
              :key="item.tenantName"
              :label="item.tenantName"
              :value="item.tenantName">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit()">立即创建</el-button>
        <el-button type="warning" v-on:click="oncancel()">取消</el-button>
      </el-form-item>

    </el-form>
    <el-form ref="renter" :model="renter" :rules="rules" label-width="80px" class="demo-ruleForm"
             style="width: 600px"
             v-if="radioValue === '租户'">

      <el-form-item label="租户名" prop="tenantName">
        <el-input v-model="renter.tenantName"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="renter.password"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="phone" @change="getRent">
        <el-input v-model="renter.phone"></el-input>
      </el-form-item>

      <el-form-item label="管理员名" prop="phone">
        <el-select v-model="this.renter.adminName" placeholder="请选择管理员" @change="changeGame">
          <el-option
              v-for="item in options2"
              :key="item.adminName"
              :label="item.adminName"
              :value="item.adminName">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" v-on:click="onSubmitTen()">立即创建</el-button>
        <el-button type="warning" v-on:click="oncancel()">取消</el-button>
      </el-form-item>

    </el-form>
  </fieldset>
</template>

<script>
import request from "@/util/request";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: "Register",
  data() {
    return {
      u: '用户',
      options: [],
      options2:[],
      admin: [
        // {adminName: 'admin'},
        // {adminName: 'admin1'},
        // {adminName: 'admin2'},
      ],
      user: {
        userName: '',
        password: '',
        phone: '',
        tenantName: ''
      },
      renter: {
        tenantName: '',
        password: '',
        phone: '',
        adminName: ''
      },
      radioValue: '用户',
      rules: {
        tenantName : [
          {required:true, message:'请输入租户名',trigger:'blur'}
        ],
        userName : [
          {required:true, message:'请输入用户名',trigger:'blur'},
          {min:3, max:8, message: '请输入长度3-8字符', trigger: 'blur'}
        ],
        password : [
          {required:true, message:'请输入密码',trigger:'blur'},
          {min:3, max:8, message: '请输入长度3-8字符', trigger: 'blur'}
        ],
        phone : [
          {required:true, message:'请输入电话',trigger:'blur'},
          {min:3, max:8, message: '请输入长度3-8字符', trigger: 'blur',pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/}
        ]
      }
    }
  },
  methods: {
    changeGame() {
      this.$forceUpdate()
    },
    changeInput(index) {
      this.radioValue = index
    },
    getRent() {
      request.post('http://localhost:8090/register/registerStart/',{
        type:"用户"
      }).then(response => {
        console.log(response)
        this.options = []
        response.data.data.forEach(rent => {
          this.options.push({tenantName: rent.tenantName})
        })
      });
      request.post('http://localhost:8090/register/registerStart',{
        type:"租户"
      }).then(response => {
        console.log(response)
        this.options2 = []
        response.data.data.forEach(rent => {
          this.options2.push({adminName: rent.adminName})
        })
      })

    },
    onSubmitTen() {
      this.$refs.renter.validate(valid=>{
        if(valid) {
          request.post('http://localhost:8090//register/registerTenant', {
            tenantName: this.renter.tenantName,
            password: this.renter.password,
            phone: this.renter.phone,
            adminName: this.renter.adminName,
          }).then(response => {
            console.log(response)
            if (response.data.code === "200") {
              ElMessage({
                showClose: true,
                message: '恭喜你，创建成功',
                type: 'success'
              })
              router.push('/')
            } else {
              ElMessage.error('创建失败,租户名已存在')
              this.user.userName = ''
            }
          })
        }
      })

    },
    onSubmit() {
      this.$refs.user.validate(valid=>{
        if(valid) {
          request.post('http://localhost:8090/user/addUser/', {
            userName: this.user.userName,
            password: this.user.password,
            phone: this.user.phone,
            tid: this.user.tid,
            tenantName: this.user.tenantName
          }).then(response => {
            console.log(response)
            if (response.data.code === "200") {
              ElMessage({
                showClose: true,
                message: '恭喜你，创建成功',
                type: 'success'
              })
              router.push('/')
            } else {
              ElMessage.error('创建失败,用户名已存在')
              this.user.userName = ''
            }
          })
        }else{
          ElMessage.error('创建失败,用户名已存在')
        }
      })


    },
    oncancel() {
      router.push('/')
    }
  },
  beforeMount() {
    this.getRent()
  }
}
</script>

<style scoped>
fieldset {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  border: 2px solid #DCDFE6;
  text-align: left;
  border-radius: 8px;
  margin: 0 auto;
  width: 35%;
}
</style>
